.spa-shell-head, .spa-shell-head-logo, .spa-shell-head-acct,
.spa-shell-head-search, .spa-shell-main, .spa-shell-main-nav,
.spa-shell-main-content, .spa-shell-foot, .spa-shell-chat,
.spa-shell-modal {
    position: absolute;
}

.spa-shell-head {
    top : 0;
    left : 0;
    right : 0;
    height : 40px;
}

.spa-shell-head-logo {
    top : 4px;
    left : 4px;
    height : 32px;
    width : 128px;
    background: orange;
}
.spa-shell-head-acct {
    top : 4px;
    right : 0;
    height : 32px;
    width : 164px;
    background: green;
}
.spa-shell-head-search {
    top : 4px;
    right : 64px;
    left : 4px;
    height : 32px;
    width : 248px;
    background: blue;
}

.spa-shell-main {
    top : 40px;
    left : 0;
    right : 0;
    bottom : 40px;
}
.spa-shell-main-content,
.spa-shell-main-nav {
    top : 0;
    bottom : 0;
}
.spa-shell-main-nav {
    width : 256px;
    background: #eee;
}
.spa-x-closed .spa-shell-main-nav {
    width : 0;
}

.spa-shell-main-content {
    left : 250px;
    right : 0;
    background: #ddd;
}
.spa-x-closed .spa-shell-main-content {
    left : 0;
}

.spa-shell-foot {
    bottom: 0;
    left : 0;
    right : 0;
    height : 40px;
}
.spa-shell-chat {
    bottom: 0;
    right : 0;
    width : 300px;
    height : 15px;
    cursor : pointer;
    background: red;
    z-index : 1;
    border-radius: 5px 0 0 0;
}
.spa-shell-modal {
    margin-top: -200px;
    margin-left: -200px;
    top : 50%;
    left : 50%;
    width : 400px;
    height : 400px;
    background:  #fff;
    border-radius: 3px;
    z-index: 2;
}